<template>
  <div>
       <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="事件详情页"
        @click-left="$router.back()"
      />
      <van-cell-group>
        <van-cell title="学号:" :value="tableData.studentNo" />
        <van-cell title="班级:" :value="tableData.className" />
        <van-cell title="学生姓名:" :value="tableData.studentName" />
        <van-cell title="宿舍:" :value="tableData.dorAddress" />
        <!-- <van-cell title="处理状态:"> -->
            <van-form @submit="onSubmit">
             <van-field
             readonly
                v-model="statusContent"
                right-icon="arrow"
                label="处理状态"
                placeholder="请选择处理状态"
                @click="statusListShare=true"
            />
            <van-action-sheet 
                v-model="statusListShare"
                title="请选择"
                :actions="status" 
                @select="onSelect" 
            />
             <van-field
                v-model="processDesc"
                label="处理描述"
                placeholder="处理描述"
                :rules="[{ required: true, message: '请填写处理描述' }]"
            />
             <div style="margin:16px">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
            
      </van-cell-group>
        
  </div>
</template>

<script>
export default {
    name:"ExcEdit",
    data(){
        return{
            tableData:[],
            status:[],
            statusListShare:false,
            
            statusContent:"",
            processDesc:'',
            absenceProcessStatus:''
        }
    },
    methods:{
        async select(){
            var {data:res} =await this.$axios({
                url:this.$location.getAppExcById,
                params:{
                    id:this.$route.params.id
                }
            })
           this.tableData=res.data;
        },
         async onSubmit(){
            var {data:res} = await this.$axios({
                url:this.$location.editExc,
                method:'post',
                data:this.$qs.stringify({
                    id: this.$route.params.id,
                    absenceProcessStatus: this.absenceProcessStatus,
                    processDesc: this.processDesc
                })
            })
            console.log(res)
            if(res.status==200){
                 this.$toast.success(res.msg)
                 this.$router.push('/AttenceExcList');
            }
        }, 
        onSelect(item){
            this.statusContent=item.name;
            this.absenceProcessStatus=item.value
            this.statusListShare = false;
        },
        async getStatusListAll(){
            const {data:res} =await this.$axios({url:this.$location.getProStatusListAll});
            res.data.forEach(item=>{
                this.status.push({
                    value:item.dictValue,
                    name:item.dictLabel
                })
            })
        },
    },
    created(){
        this.select();
        this.getStatusListAll();
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #35d299;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
        }
    }
    /deep/ .btn button{
        margin: 10px;
    }
</style>